<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令案例_1</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
        自定义指令总结:
            一、定义语法:
                (1)局部指令:
                    new Vue({}
                        directives:({指令名:配置对象})
                    )   或者
                    new Vue({}
                        directives({指令名:配置对象})
                    )
                (2)全局指令:
                    Vue.directive(指令名,配置对象)
                    或
                    Vue.directive(指令名,回调函数)
            二、配置对象中常用的3个回调:
                (1).bind: 指令与元素成功绑定时调用。
                (2).inserted: 指令所在元素被插入页面时调用。
                (3).update: 指令所在模板结构被重新解析时调用。
            三、备注:
                1.指令定义时不加v-,但是使用时要加v-;
                2.指令名如果是多个单词，要使用kebab-case命名方式，不要使用camelCase命名。
-->


<div id="app">
    <!--自定义实现点击改变数值后，显示改变后的值的10o倍数字-->
    当前n的值:<h1>{{n}}</h1>
    n的值扩大100倍后的值:<h1 v-big="n"></h1>
    <button @click="n++">点击对n增加1</button>
</div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            n: 0
        },
        directives: {
            big(el, binding){
                el.textContent = binding.value * 100;
            }
        }
    })
</script>
</html>